Bubbleで作ったアプリにLINEログインしてみた

こんにちはCX事業本部のKyoです。

BubbleでLINEログイン（ソーシャルログイン）が使えることを検証したのでレポートします。

材料

Bubbleのプラグインとして以下が公開されているので利用します。

なお、LINEログインを行うためにはLINE Developersへの登録が必要となります。

LINE Developers

作るもののイメージ

• ログイン画面
  • LINEログインできる
• ユーザー情報画面
  • 以下が表示される
    • LINE上で設定されているアイコン
    • LINE上で設定されている名前
    • LINE ID

やってみる

プロバイダー・チャネルの作成

LINE Developersコンソールにログインし、プロバイダーを作成します。プロバイダー名は任意でOKです。今回はbubble-plugin-testとしています。

プロバイダーが作成できたら以下の画面に遷移するので、LINEログインを選択します。

赤枠で囲った箇所を設定します。値は任意でOKです。アプリタイプはウェブアプリを選択します。

作成後に遷移するページでチャネルID, チャネルシークレットをメモしておきます。

Bubbleプロジェクトを作成

Bubbleのホームからアプリを作成します。アプリ名は後で必要になります。

プラグインのインストールと設定

画面左側からPluginsでプラグインページに移動し、 “+Add Plugins”をクリックします。

プラグイン一覧が表示されるので、左上の検索にlineと入力し、"LINE LOGINプラグイン"を見つけます。installボタンでインストールを行い、DONEでページを抜けます。

プラグインの設定を行います。プロバイダー・チャネルの作成の際にメモしておいたチャネルID, チャネルシークレットを以下の画像のように入力します。また、”Use a generic redirect URL…”のチェックボックスにもチェックを入れます。

コールバックURL登録

LINE Developersコンソールに移動し、コールバックURLを登録します。

• “LINEログイン設定”のタブを選択
• 以下のコールバックURLを入力（プラグインの設定画面に表示されているもの）

      https://【アプリ名】.bubbleapps.io/api/1.1/oauth_redirect
      

• “開発中”をクリックして、”公開済み”へ変更

ログイン画面作成

Bubbleに戻ってログイン画面を作成します。

ボタンを配置し、ワークフローを設定します。

※ 今回は検証のためシンプルなボタンを利用しています。本番利用される場合はLINEログインボタンのデザインガイドラインに従ってください。

“Account”からSignup/login with a social networkを選択します。

“OAuth provider”をLINE Loginに設定します。

ログイン後にユーザー情報画面へ遷移させるために”Navigation”からGo to page …を選択します。

"Destination"ではCreate a new page… を選択しusersというページを作ります（なおuserは予約語のようで利用できませんでした）。

"Destination"にusersを設定します。

ユーザー情報画面の作成

LINEのユーザー情報を表示するページを作成します。

LINE上で設定されているアイコン

Imageを配置し、”Dynamic image”でGet data from external APIを選択します。

“API provider”でLINE Login - Userを選択、続いて’s pictureUrlを選択します。これでLINE LoginのユーザーのpictureURLを反映するようになります。

LINE上で設定されている名前とLINE ID

先ほど作成したImageの右側にテキストボックスを4つ並べます。

1番上と3番目のテキストボックスにはDisplay Name, LINE IDと入力しておきます。

2番目のテキストボックスでは、Imageと同様にGet data from external APIを選択し、“API provider”でLINE Login - User、続いて’s displayNameを選択します。

4番目も2番目とほぼ同様の手順で、最後のみ‘s userIdを選択します。

動かしてみる

プレビューモードで動作させてみます。

ボタンをクリックすると以下が表示されます。

自身のLINEのID, パスワードを入力し、ログインします（QRコードログインも利用できます）。

"許可する"をクリックするとユーザーページへ遷移します。

無事ログインとユーザー情報が取得できましたね。

※ セキュリティのためLINE IDはマスクしていますが、実際には英数字で取得できています。

所感

プラグインを利用することであっという間にLINEログインが実装できました（GUI操作なので手順の画像が多いですが）。LINE側の準備さえ済んでいれば10分程度で実装できてしまいます。

別のプラグインでLINEメッセージ送信もできるようなのでそちらも試してみたいと思います。